import React from 'react'
import "./index.less"

import { NavBar, Cell, Switch, Toast, Popup, Checkbox,Dialog } from "react-vant"
import request from '../../../../utils/request'

import { getData } from "../../../../api/index"

import newTouch from "../../../../utils/touch"
export default function DataSet(props) {
    const [data, setData] = React.useState()

    React.useEffect(async () => {
        let newData = await getData()
        setData(newData);

        setBlackSwitch(newData.friendData.find(item => {
            return item.uuid === props.location.state.msg.uuid
        }).isBlacklist);
    }, [])
    
    // 跳转到设置备注和标签页
    const toSetRemark = () => {
        props.history.push({
            pathname: "/main/setRemark",
            state: { data: props.location.state.msg, path: props.location.pathname, oldPath: props.location.state.path }
        })
    }

    // 控制黑名单的开关
    const [blackSwitch, setBlackSwitch] = React.useState()

    // 设置黑名单方法
    const setBlackList = (flag) => {
        Toast.loading({
            message: '加载中...',
            forbidClick: true,
            onClose: () => {
                request.post('/ymz//setBlackList', { flag, data: props.location.state.msg }).then(res => {
                    setBlackSwitch(flag)
                })
            }
        });
    }


    // 设置朋友权限
    const [value, setValue] = React.useState(['a']);
    // 是否仅聊天
    const [isOnlyChat, setIsOnlyChat] = React.useState(true)
    // 设置朋友权限方法
    const toggle = (name) => {
        name === 'b' ? setIsOnlyChat(false) : setIsOnlyChat(true);
        let arr = []
        arr.push(name)
        setValue(arr);
    };

    // 删除好友
    const delFriend = () => {
        Dialog.confirm({
            title: '删除联系人',
            confirmButtonText:"删除",
            cancelButtonText:"取消",
            confirmButtonColor:"rgb(203,79,95)",
            children: (
                <div style={{ margin: '16px' }}>
                  将联系人  “ {props.location.state.msg.remark?props.location.state.msg.remark:props.location.state.msg.name} ”  删除，将同时删除与该联系人的聊天记录
                </div>
            ),
            onConfirm:() => {
                Toast.loading({
                    message: '加载中...',
                    forbidClick: true,
                    onClose:() => {
                        request.post('/ymz/delFriend',props.location.state.msg).then(res => {
                            props.history.push("/main/addressList")
                        })
                    }
                });
                
            }
        }).then(() => {
            // on close
        });
        
    }

    // 控制朋友权限弹框
    const [showPopup, setShowPopup] = React.useState(false)


    const mainRef = React.useRef()
    return (
        <div className='dataSet'>
            <header>
                <NavBar
                    title="资料设置"
                    leftArrow
                    fixed={true}
                    onClickLeft={() => {
                        props.history.push({
                            pathname: props.location.state.path,
                            state: { path: props.location.state.oldPath, msg: props.location.state.msg }
                        })
                    }}
                />
            </header>
            <main ref={mainRef} onTouchStart={(e) => {newTouch.touchStart(e)}} onTouchMove={(e) => {newTouch.touchMove(e,mainRef)}} onTouchEnd={(e) => {newTouch.touchEnd(e,mainRef)}}>
                <div className='cell_div'>
                    <Cell title="设置备注和标签" value={props.location.state.msg.remark} isLink onClick={toSetRemark} />
                    <Cell onClick={() => { setShowPopup(true) }} title="朋友权限" isLink />
                </div>
                <div className='cell_div'>
                    <Cell title="把他推荐给朋友" isLink />
                    <Cell title="添加到桌面" isLink />
                </div>
                <div className='cell_div'>
                    <Cell title="设为星标朋友" rightIcon={
                        <Switch size={20} activeColor="#02ca02" inactiveColor="#ccc" onChange={(checked) => console.log(`switch to ${checked}`)} />
                    } />
                </div>
                <div className='cell_div'>
                    <Cell title="加入黑名单" rightIcon={
                        <Switch size={20} activeColor="#02ca02" checked={blackSwitch} inactiveColor="#ccc" onChange={(checked) => { setBlackList(checked) }} />
                    } />
                    <Cell title="投诉" isLink />
                </div>
                <p className='del' onClick={delFriend}>
                    <span>删除</span>
                </p>
                
            </main>

            <Popup
                visible={showPopup}
                onClose={() => setShowPopup(false)}
                position="right"
                style={{ height: "100%", width: '100%', background: "rgb(237,237,237)" }}
            >
                <NavBar
                    title="朋友权限"
                    leftArrow
                    onClickLeft={() => {
                        setShowPopup(false)
                    }}
                    style={{ background: "none" }}
                />
                <div className='content'>
                    <ul>
                        <li style={{ paddingTop: '5px' }}>
                            <p style={{ padding: '5px 0px 5px 10px' }}>
                                设置朋友权限
                            </p>
                            <Checkbox.Group value={value}>
                                <Cell.Group>
                                    <Cell
                                        style={{
                                            borderRadius: '5px 5px 0px 0px',
                                            borderBottom: "1px solid rgb(229,229,229)",
                                        }}
                                        clickable
                                        title="聊天、朋友圈、微信运动等"
                                        onClick={() => toggle('a')}
                                        rightIcon={isOnlyChat?<span className='success'></span>:null}
                                    />
                                    <Cell
                                        style={{
                                            borderRadius: '0px 0px 5px 5px',
                                        }}
                                        clickable
                                        title="仅聊天"
                                        onClick={() => toggle('b')}
                                        rightIcon={!isOnlyChat?<span className='success'></span>:null}
                                    />
                                </Cell.Group>
                            </Checkbox.Group>
                        </li>
                        {
                            !isOnlyChat?<li style={{ paddingTop: '5px' }}>
                                <p style={{ padding: '0px 0px 5px 10px' }}>
                                    对方看不到你的朋友圈、状态、微信运动等。
                                </p>
                            </li>:null
                        }
                        {
                            isOnlyChat?<li style={{ paddingTop: '5px' }}>
                                <p style={{ padding: '5px 0px 5px 10px' }}>
                                    朋友圈和状态
                                </p>
                                <Cell.Group>
                                    <Cell
                                        style={{
                                            borderRadius: '5px 5px 0px 0px',
                                            borderBottom: "1px solid rgb(229,229,229)",
                                        }}
                                        center
                                        title="不让她 / 他看我"
                                        rightIcon={
                                            <Switch size={20} inactiveColor="rgba(0,0,0,.2)" activeColor="rgb(29, 173, 108)" onChange={(checked) =>{
                                                console.log(props.location.state.msg.fromId)
                                            } } />
                                        }
                                    />
                                    <Cell
                                        style={{
                                            borderRadius: '0px 0px 5px 5px',
                                        }}
                                        center
                                        title="不看她 / 他"
                                        rightIcon={
                                            <Switch size={20} inactiveColor="rgba(0,0,0,.2)" activeColor="rgb(29, 173, 108)" onChange={(checked) => {
                                                console.log(props.location.state.msg.toId)
                                            }} />
                                        }
                                    />
                                </Cell.Group>
                            </li>:null
                        }
                    </ul>
                </div>
            </Popup>
        </div>
    )
}
